﻿<template>
  <header class="nav-wrapper">
    <div class="nav-brand" @click="goHome">
      <img src="/media/leaf.svg" alt="薄荷健康 logo" />
      <div class="brand-copy">
        <strong>薄荷健康</strong>
        <span>Mint Health</span>
      </div>
    </div>
    <ElMenu class="nav-menu" mode="horizontal" :default-active="activeRoute">
      <ElMenuItem index="/">
        <RouterLink to="/">首页</RouterLink>
      </ElMenuItem>
      <ElMenuItem index="/recipes">
        <RouterLink to="/recipes">营养食谱</RouterLink>
      </ElMenuItem>
      <ElMenuItem index="/guides">
        <RouterLink to="/guides">健康指南</RouterLink>
      </ElMenuItem>
      <ElMenuItem v-if="!isAdmin" index="/profile">
        <RouterLink to="/profile">个人中心</RouterLink>
      </ElMenuItem>
      <ElMenuItem v-else index="/admin">
        <RouterLink to="/admin">管理中心</RouterLink>
      </ElMenuItem>
    </ElMenu>
    <div class="nav-actions">
      <div v-if="!isAuthenticated" class="auth-actions">
        <ElButton text @click="goLogin">登录</ElButton>
        <ElButton text @click="goRegister">注册</ElButton>
      </div>
      <ElDropdown v-else trigger="click" @command="handleCommand">
        <span class="user-chip">
          <ElAvatar size="small">{{ userInitials }}</ElAvatar>
          <span>{{ userName }}</span>
        </span>
        <template #dropdown>
          <ElDropdownMenu>
            <ElDropdownItem v-if="!isAdmin" command="profile">个人中心</ElDropdownItem>
            <ElDropdownItem v-else command="admin">管理中心</ElDropdownItem>
            <ElDropdownItem divided command="logout">退出登录</ElDropdownItem>
          </ElDropdownMenu>
        </template>
      </ElDropdown>
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute, RouterLink, useRouter } from "vue-router";
import { ElMenu, ElMenuItem, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElAvatar } from "element-plus";
import { useAuthStore } from "../stores/auth";

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();

const isAuthenticated = computed(() => authStore.isAuthenticated);
const isAdmin = computed(() => authStore.isAdmin);
const userName = computed(() => authStore.user?.name ?? "Mint 用户");
const userInitials = computed(() => userName.value.slice(0, 1).toUpperCase());

const activeRoute = computed(() => {
  if (route.path.includes("/articles")) return "/guides";
  if (["/login", "/register"].includes(route.path)) return "";
  return route.path;
});

const goHome = () => {
  router.push({ name: "home" });
};

const goLogin = () => {
  router.push({ name: "login" });
};

const goRegister = () => {
  router.push({ name: "register" });
};

const handleCommand = (command: string) => {
  if (command === "logout") {
    authStore.logout();
    router.push({ name: "home" });
    return;
  }
  if (command === "profile" && !isAdmin.value) {
    router.push({ name: "profile" });
    return;
  }
  if (command === "admin") {
    router.push({ name: "admin" });
  }
};
</script>

<style scoped>
.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: linear-gradient(90deg, rgba(42, 191, 145, 0.95), rgba(26, 155, 215, 0.92));
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.nav-brand img {
  width: 42px;
  height: 42px;
  filter: brightness(0) invert(1);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-copy span {
  font-size: 12px;
  opacity: 0.9;
}

.nav-menu {
  border-bottom: none;
  background: transparent;
  flex: 1;
  margin: 0 40px;
}

.nav-menu :deep(.el-menu-item) {
  color: #ffffff;
  font-weight: 500;
}

.nav-menu :deep(.el-menu-item.is-active) {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 18px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-actions {
  display: flex;
  gap: 4px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  color: #ffffff;
}

@media (max-width: 960px) {
  .nav-wrapper {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  .nav-menu {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}
</style>
